<script setup>
	import {ref} from 'vue'
	import {onMounted} from 'vue'
	import {chartApi} from '@/api/chart.js'
	
	const userCount = ref(0);
	const blogCount = ref(0);
	const typeCount = ref(0);
	const commentCount = ref(0);
	
	// 加载完成后再进行
	onMounted(() => {
		chartApi.selectTotalCount().then((result) => {
			if (result.code === 0) {
				userCount.value = result.data.userCount
				blogCount.value = result.data.blogCount
				typeCount.value = result.data.typeCount
				commentCount.value = result.data.commentCount
			}
		})
	});

</script>

<template>
	<el-row>
		<el-col :span="6">
			<div class="title">用户数量</div>
			<div class="count mem">{{ userCount }}</div>
		</el-col>
		<el-col :span="6">
			<div class="title">博客数量</div>
			<div class="count coa">{{ blogCount }}</div>
		</el-col>
		<el-col :span="6">
			<div class="title">分类数量</div>
			<div class="count cou">{{ typeCount }}</div>
		</el-col>
		<el-col :span="6">
			<div class="title">评论数量</div>
			<div class="count res">{{ commentCount }}</div>
		</el-col>
	</el-row>
</template>

<style scoped>
	.title {
		text-align: center;
		height: 40px;
		line-height: 40px;
	}
	
	.count {
		margin: auto;
		width: 100px;
		height: 100px;
		border: 15px solid #49BCF7;
		border-radius: 50%;
		text-align: center;
		line-height: 100px;
		font-size: 30px;
	}
	
	.mem {
		border-color: #49BCF7;
		color: #49BCF7;
	}
	
	.coa {
		border-color: #91CC75;
		color: #91CC75;
	}
	
	.cou {
		border-color: #FAC858;
		color: #FAC858;
	}
	
	.res {
		border-color: #5470C6;
		color: #5470C6;
	}
</style>